<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <input type="file" class="upload" />
    <img src="" alt="">

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
         /**
             * 目标：图片上传，显示到网页上
             *  1. 获取图片文件
             *  2. 使用 FormData 携带图片文件
             *  3. 提交到服务器，获取图片url网址使用
        */


        document.querySelector(".upload").addEventListener("change",ev=>{
            // change 修改事件 
            // 文件上传按钮,选择的文件会保存在事件对象中
            // 1. 获取选择的图片资源
            console.dir(ev.target.files[0])
            // 2. 使用 FormData 携带图片文件 调用接口上传数据 form-data数据格式 
            const fd = new FormData()
             // fd.append('键', 值) 属性追加
            fd.append('img',ev.target.files[0])
            console.log(fd);
            fd.forEach(item=>{
                console.log(item);
            })

            axios({
                url:"https://hmajax.itheima.net/api/uploadimg",
                method:"POST",
                data:fd
            }).then(res=>{
                console.log(res);
                document.querySelector("img").src = res.data.data.url;
            })


        })

    </script>
</body>
</html>